<template>
  <div style="background-color: #fff;">
    <!-- 头部导航 -->
    <Header />
    <div id="pagebanner" v-if="firstNav">
      <img :src="firstNav.logoUrl" alt="" style="width: 100%;height: 328px" v-if="firstNav.logoUrl">
    </div>
    <div id="pagecontent" v-if="firstNav">
      <div class="pagetitle">
        <div class="floatleft">
          <span class="font_32 font_deepblue">{{ firstNav.name }}</span>
          <span class="font_18" v-if="firstNav.esName">/ {{ firstNav.esName }}</span>
        </div>
        <div class="floatright">
          您的位置：<span @click="goHome" style="cursor:pointer">首页</span> >>
          <span>{{ firstNav.name }}</span>
          <template v-if="secondNav && secondNav.id">
            >> <span style="color:#0777db">{{ secondNav.name }}</span>
          </template>
        </div>
      </div>

      <div id="content">
        <LeftMenu ref="leftMenu" />
        <div class="rightcontent">
          <div class="contentup">{{secondNav && secondNav.name ? secondNav.name : detail.title}}</div>
          <div class="product-info">
            <div class="pic">
              <img :src="detail.logoUrl" @click="goDetail(detail.id)" />
            </div>
            <div class="info">
              <div class="title">{{ detail.title }}</div>
              <div v-html="detail.subTitle ? detail.subTitle.replace(/\n/g, '<br>') : ''"></div>
            </div>
          </div>
          <hr>
          <div v-html="detail.content"></div>
          <DetailFooter />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import LeftMenu from '@/components/leftMenu.vue'
import mixins from '@/mixins'
import api from '@/api'
import DetailFooter from '@/components/detailFooter.vue'
export default {
  name: 'AboutDetailPage',
  mixins: [mixins],
  components: {
    Header,
    Footer,
    LeftMenu,
    DetailFooter
  },
  data() {
    return {
      detail: {}
    }
  },
  methods: {
    init() {
      api.getContentDetail({id: this.$route.query.id}).then(res => {
        this.detail = res.data
        if (res.data.htmlTitle) {
          document.title = res.data.htmlTitle
        }
        this.updateMetaDescription(res.data.metaDec)
        this.updateMetaKeywords(res.data.meta)
      })
    },
    goHome() {
      this.$router.push('/')
    },
  },
  created() {
    this.init()
  },
}
</script>
<style lang="scss">
@import './index.scss';
.product-info {
  display: flex;
  justify-content: space-between;
  img {
    width: 380px;
    aspect-ratio: 380 / 320;
    cursor: pointer;
  }

  .info {
    flex: 1;
    margin-left: 30px;

    .title {
      color: #365897;
      font-size: 24px;
      line-height: 25px;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
hr {
  height: 3px;
  border: 1px #CCC solid;
  margin: 20px 0;
}
.detail-footer {
  margin-top: 20px;
  text-align: right;
  span {
    cursor: pointer;
    margin-left: 10px;
  }
}
</style>
